import { Image } from 'antd';
import { useState, useEffect } from 'react';

import commonService from '@/api/services/commonService';
import giftIcon from '@/assets/img/giftIcon.png';

export default function GiftPage() {
  const [banner1, setBanner1] = useState<any>({});
  const [list2, setList2] = useState<any>([]);
  const [banner3, setBanner3] = useState<any>({});

  useEffect(() => {
    commonService.getFrontApi('createGift', {}).then((res) => {
      setBanner1(res.banner1);
      setList2(res.list2);
      setBanner3(res.banner3);
    });
  }, []);

  const toDesign = (url: string) => {
    // window.location.href = url;
    window.location.href = `/#/editor`;
  };

  const jump = (url: string) => {
    window.location.href = url;
  };

  return (
    <>
      <div className="relative left-[50%] ml-[-712px] mt-[40px] flex w-[1424px] flex-col">
        <div>首页 / 创作 / 礼品</div>
        <div className="banner1 relative mt-[20px] h-[500px]">
          <Image src={banner1.picPath} alt="" preview={false} />
          <div className="go-create absolute right-[80px] top-[100px] h-[300px] w-[460px] rounded-[12px] bg-[rgba(255,255,255,0.6)] pt-[80px]">
            <div className="mb-[48px] text-center text-[24px] leading-[34px] text-[#363A44]">
              创建属于你自己的礼品
            </div>
            <div className="flex justify-center">
              <div
                onClick={() => toDesign(banner1.href)}
                className="h-[60px] w-[140px] cursor-pointer rounded-[8px] bg-[#FD7901] text-center text-[24px] leading-[60px] text-[#ffffff]"
              >
                去创作
              </div>
            </div>
          </div>
        </div>
        <div className="mb-[100px] mt-[80px] text-center">
          <div className="flex justify-center">
            <div className="h-[80px] w-[80px] rounded-[50%] bg-[#F2F3F7]">
              <Image src={giftIcon} alt="" preview={false} />
            </div>
          </div>
          <div className="text-[20px] text-[#363A44]">照片滤镜和形状</div>
          <div className="text-[16px] text-[#686B73]">有很多可以用于照片的滤镜模板</div>
        </div>
        <div className="banner2 mb-[100px] text-center">
          <div className="text-[28px] text-[#363A44]">送给每个人的礼物</div>
          <div className="mt-[20px] flex justify-center gap-[20px]">
            {list2.map((item: any) => (
              <div
                key={item.id}
                className="flex w-[330px] cursor-pointer flex-col"
                onClick={() => jump(item.href)}
              >
                <div className="h-[330px] w-[330px] overflow-hidden">
                  <Image className="!w-[330px]" src={item.picPath} preview={false} />
                </div>
                <div className="mt-[10px] text-left">{item.title}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div
        className="banner3 mb-[120px] flex  h-[552px] w-[100%] justify-center  bg-[rgba(253,121,1,0.06)]
      pb-[100px] pt-[100px]"
      >
        <div className="flex w-[1424px] items-center">
          <div className="mr-[20px] h-[352px] w-[1020px]">
            <Image src={banner3.picPath} alt="" preview={false} />
          </div>
          <div>
            <div className="mb-[20px] text-[50px] text-[#363A44]">定制礼物</div>
            <div className="mb-[42px] text-[24px] text-[#686B73]">
              可以将照片添加到我们的任何产品中
            </div>
            <div
              onClick={() => toDesign(banner3.href)}
              className="h-[60px] w-[140px] cursor-pointer rounded-[8px] bg-[#FD7901] text-center text-[24px] leading-[60px] text-[#ffffff]"
            >
              去创作
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
